<template>
  <div class="topRec_List">
    <myChart :my-option="option"></myChart>
  </div>
</template>

<script setup lang="ts">
import myChart from "../myEcharts/index.vue";

const zoomData = [
  {
    type: "inside",
    startValue: 0,
    endValue: 6,
    minValueSpan: 2,
    maxValueSpan: 3,
    yAxisIndex: [0, 1, 2, 3, 4, 5, 6],
    zoomOnMouseWheel: false, // 关闭滚轮缩放
    moveOnMouseWheel: false, // 开启滚轮平移
    moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
  },
  {
    show: false, //进度条去除
    type: "slider",
    realtime: true,
    startValue: 0,
    endValue: 2,
    width: 0,
    height: 0,
    yAxisIndex: [0, 1, 2, 3, 4, 5, 6], // 控制y轴滚动
    backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
    handleSize: 0, // 两边手柄尺寸
    showDataShadow: false, //是否显示数据阴影 默认auto
    showDetail: false, // 拖拽时是否展示滚动条两侧的文字
    top: "1%",
    right: "5",
  },
];
let option = {
  tooltip: {
    type: "showTip",
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      axis: "y",
    },
  },
  legend: {
    top: "5%",
    left: "6%",
    textStyle: {
      color: "#fff", //自定义文字字体颜色
      fontSize: 12,
    },
  },
  grid: {
    left: "15%",
    top: "30%",
    right: "5%",
    bottom: "0%",
    containLabel: true,
  },
  xAxis: {
    show: false,
  },
  dataZoom: zoomData,
  yAxis: {
    type: "category",
    data: [
      "中信大脑",
      "新版个人移动银行 ",
      "用户中心",
      "零售业务领域集市",
      "零售客户经营平台",
      "员工移动营销服务平台",
      "标签工厂",
    ],
    axisTick: {
      //刻度线
      show: false,
    },
    axisLine: {
      lineStyle: {
        width: 0,
      },
    },
    axisLabel: {
      fontSize: 11,
      color: "#fff",
    },
    verticalAlign: "bottom",
    align: "left",
    //调整文字上右下左
    padding: [0, 0, 0, 0],
  },
  color: ["#ff0000", "#ffff00", "#0070c0", "#98c0fd", "#26c847"],
  series: [
    {
      name: "5级",
      type: "bar",
      stack: "total",
      barWidth: 10,
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        borderWidth: 0.5,
      },

      data: [0, 0, 0, 1, 2, 3, 4],
    },
    {
      name: "4级",
      type: "bar",
      stack: "total",
      barWidth: 10,
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        borderWidth: 0.5,
      },
      data: [0, 0, 4, 3, 2, 4, 2],
    },
    {
      name: "3级",
      type: "bar",
      stack: "total",
      barWidth: 10,
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        borderWidth: 0.5,
      },
      data: [2, 3, 4, 4, 2, 2, 1],
    },
    {
      name: "2级",
      type: "bar",
      stack: "total",
      barWidth: 10,
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        borderWidth: 0.5,
      },
      data: [2, 4, 2, 2, 0, 1, 3],
    },
    {
      name: "1级",
      type: "bar",
      stack: "total",
      barWidth: 10,
      emphasis: {
        focus: "series",
      },
      itemStyle: {
        borderWidth: 0.5,
      },
      data: [6, 3, 0, 0, 4, 0, 0],
    },
  ],
};
</script>

<style scoped lang="scss">
.topRec_List {
  height: 80%;
  pointer-events: auto;
  // background-color: red;
  canvas {
    height: 100%;
  }
}
</style>
